<template>
  <div>
    <div class="order-info clearfix">
      <span class="fl">订单提交成功，请尽快付款！订单号 ：{{order.orderId}}</span>
      <span class="fr">应付金额：<span class="price">¥ {{order.payPrice}} </span>元</span>
    </div>
    <div class="pay-box">
      <div class="hd">
        <span class="lager">微信支付</span>
      </div>
      <div class="bd">
        <img :src="qrcode" class="qrcode">
        <img src="../../assets/images/scan.png">
      </div>
    </div>
  </div>
</template>

<script>
import {sign} from '@/util/sign'
export default {
  data () {
    return {
      order: {},
      codeUrl: this.$route.query.codeUrl || '',
      signstr: '',
      qrcode: '',
      payed: false
    }
  },
  mounted () {
    this.$store.commit('setHeaderTit', '收银台')
    // 获取订单信息
    this.order = JSON.parse(window.localStorage.getItem('payOrder'))
    // 根据codeUrl生成签名
    let param = {
      codeUrl: this.codeUrl
    }
    param = sign(param)
    this.signstr = param.sign
    // 生成支付二维码啊
    this.qrcode = this.$pay + '/app/payment/qrCodeImg?codeUrl=' + this.codeUrl + '&sign=' + this.signstr
    // 监听支付结果
    setInterval(() => {
      if (!this.payed) {
        this.queryPayStatus()
      }
    }, 3000)
  },
  methods: {
    // 监听是否支付成功
    queryPayStatus () {
      this.$http.post(this.$pay + '/app/payment/queryPayStatus', {
        orderNo: this.order.orderId
      }).then(res => {
        if (res.responseCode === '0000') { // 支付成功
          this.payed = true
          this.$router.push({
            path: '/order/orderInfo',
            query: {
              orderId: this.order.orderId
            }
          })
        } else { // 未支付成功
          this.payed = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.order-info {
  margin: 20px auto;
  width: 1200px;
  font-size: 14px;
  color: $f_normal;
  .price {
    font-size: 20px;
    color: $red;
  }
}
.pay-box {
  margin: auto;
  padding: 20px;
  width: 1200px;
  background: url(../../assets/images/phone-view.png) 690px center no-repeat;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  .hd {
    font-size: 18px;
    color: $f_main;
  }
  .bd {
    margin: 45px 0 30px 150px;
    .qrcode {
      display: block;
      margin-bottom: 20px;
      width: 300px;
      height: 300px;
      border: solid 1px $border_color;
    }
  }
}
</style>
